<template>
	<div class="">
		<!--<base-header></base-header>-->
		<input v-model="oldPassword" class="put-title mt10" type="password" placeholder="请输入原始密码" />
		<input v-model="newPassword" class="put-title" type="password" placeholder="请输入新密码" />
		<input v-model="newPasswordTwo" class="put-title" type="password" placeholder="请再次输入密码" />
		<!--put_questin-->
		<div class="put_question">
			<span @click="public">修改密码</span>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	export default {
		name: 'PutQuestion',
		components: {
			BaseHeader
		},
		data() {
			return {
				uid: '',
				token: '',
				oldPassword: '',
				newPassword: '',
				newPasswordTwo: ''
			}
		},
		mounted() {
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
		},
		methods: {
			//发布问题
			public() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token,
					password: self.oldPassword,
					new_password: self.newPassword,
					confirm: self.newPasswordTwo
				};
				$.post(global.domain + global.API.user_update_password, data, function(msg) {
					if(msg.error == 0) {
						self.$layer.alert('密码修改成功');
						self.oldPassword = '';
						self.newPassword = '';
						self.newPasswordTwo = '';
					} else {
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.put-title {
		width: 100%;
		padding: 15px;
		background-color: #fff;
		border: none;
		outline: none;
		color: #bbb;
	}
	
	.put-title {
		margin-bottom: 10px;
	}
	
	.mt10 {
		margin-top: 10px;
	}
	
	.put_question {
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		background-color: #f7f7f7;
		border-top: 1px solid #dbdbdb;
		padding: 10px 0;
	}
	
	.put_question span {
		color: #FFFFFF;
		background-color: #37B48A;
		padding: 5px 45px;
		display: inline-block;
	}
</style>